<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>单据信息</title>
</head>
<body>

<!--弹窗：单据信息-->
<div th:fragment="pzDetail" class="modal inmodal fade" id="pzDetail_Modal" tabindex="-1" role="dialog"
     aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="pzDetail_modalTitle">单据信息</h4>
                <p id="pzDetail_modalDesc" class="font-bold text-danger"></p>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12">
                        <div class="tabs-container">
                            <ul id="pzDetail_tab" class="nav nav-tabs" role="tablist">
                                <li><a class="nav-link active" data-toggle="tab" href="#tab-detail">单据详情</a></li>
                                <li><a class="nav-link" data-toggle="tab" href="#tab-attach">相关附件</a></li>
                                <li><a class="nav-link" data-toggle="tab" href="#tab-budget">申请明细</a></li>
                                <li class="d-none trip"><a class="nav-link" data-toggle="tab"
                                                           href="#tab-trip">出差信息</a></li>
                                <li class="d-none expense"><a class="nav-link" data-toggle="tab"
                                                              href="#tab-money">经费来源</a></li>
                                <li class="d-none expense"><a class="nav-link" data-toggle="tab"
                                                              href="#tab-pay">支付方式</a></li>
                                <li class="d-none expense"><a class="nav-link"
                                                              data-toggle="tab"
                                                              href="#tab-invoice">发票信息</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div role="tabpanel" id="tab-detail" class="tab-pane active">
                                    <div id="pzDetail_detail" class="panel-body" style="overflow: auto">

                                    </div>
                                </div>
                                <div role="tabpanel" id="tab-attach" class="tab-pane">
                                    <div class="panel-body">
                                        <div id="pzDetail_lightBoxGallery" class="lightBoxGallery row">

                                        </div>
                                    </div>
                                </div>
                                <div role="tabpanel" id="tab-budget" class="tab-pane">
                                    <div class="panel-body">
                                        <table id="pzDetail_budgettable" class="table table-striped"></table>
                                    </div>
                                </div>
                                <div role="tabpanel" id="tab-trip" class="tab-pane">
                                    <div class="panel-body">
                                        <table id="pzDetail_triptable" class="table table-striped"></table>
                                    </div>
                                </div>
                                <div role="tabpanel" id="tab-money" class="tab-pane">
                                    <div class="panel-body">
                                        <table id="pzDetail_moneytable" class="table table-striped"></table>
                                    </div>
                                </div>
                                <div role="tabpanel" id="tab-pay" class="tab-pane">
                                    <div class="panel-body">
                                        <table id="pzDetail_paytable" class="table table-striped"></table>
                                    </div>
                                </div>
                                <div role="tabpanel" id="tab-invoice" class="tab-pane">
                                    <div class="panel-body">
                                        <table id="pzDetail_invoicetable" class="table table-striped"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>

    <script id="pzDetail_img_item_tmpl" type="text/x-jquery-tmpl">
    <div class="col-md-2 d-flex flex-column" id="pzDetail_img_${attch.id}">
        <img src="${attch.thumbnailPath}" originalSrc="${attch.viewPath}" alt="${attch.realName}" style="border: solid 1px #cdcdcd;">
        <div>
            <a data-id="${attch.id}" onclick="pzDetailObj.deleteHandler(this)" class="trash btn btn-white btn-bitbucket text-success" data-toggle="tooltip" title="删除">
                <i class="fa fa-trash"></i>
            </a>
        </div>
    </div>


    

    </script>
    <script id="pzDetail_pdf_item_tmpl" type="text/x-jquery-tmpl">
    <div class="col-md-2 d-flex flex-column" id="pzDetail_pdf_${attch.id}">
        <a href="${attch.viewPath}" title="${attch.realName}" target="_blank" class="p-t-xs" style="width: 100px;height:100px;font-size:70px;">
            <i class="fa fa-file-pdf-o"></i>
        </a>
        <div>
            <a data-id="${attch.id}" onclick="pzDetailObj.deleteHandler(this)" class="trash btn btn-white btn-bitbucket text-success" data-toggle="tooltip" title="删除">
                <i class="fa fa-trash"></i>
            </a>
        </div>
    </div>
    

    </script>
    <script type="text/javascript">
        $().ready(function () {
            $('a[href|="#tab-attach"]').click(function (e) {
                pzDetailObj.loadAttachHandler();
            });
            $('a[href|="#tab-budget"]').click(function (e) {
                pzDetailObj.loadBudgetHandler();
            });
            $('a[href|="#tab-trip"]').click(function (e) {
                pzDetailObj.loadTripHandler();
            });
            $('a[href|="#tab-money"]').click(function (e) {
                pzDetailObj.loadMoneyHandler();
            });
            $('a[href|="#tab-pay"]').click(function (e) {
                pzDetailObj.loadPayHandler();
            });
            $('a[href|="#tab-invoice"]').click(function (e) {
                pzDetailObj.loadInvoiceHandler();
            });
            $('#pzDetail_lightBoxGallery').viewer({
                url: 'originalSrc',
                zIndex: 9999
            });
            pzDetailObj.budgetTable.bootstrapTable({
                formatNoMatches: function () {  //没有匹配的结果
                    return '暂无数据';
                },
                columns: [{
                    title: '预算部门',
                    field: 'deptName',
                    width: 150,
                }, {
                    title: '预算项目',
                    field: 'projectName',
                    width: 150,
                }, {
                    title: '经济分类',
                    field: 'cateName'
                }, {
                    title: '申请金额',
                    field: 'money',
                    formatter: function (value, row, index) {
                        return $.moneyFormat(value);
                    }
                }, {
                    title: '费用说明',
                    field: 'remark'
                }, {
                    title: '收款信息',
                    field: 'receivables',
                    visible: false,
                    formatter: function (value, row, index) {
                        var values = [];
                        values.push('名称:' + (row.receivablesName ? row.receivablesName : ''));
                        values.push('账号:' + (row.receivablesAccount ? row.receivablesAccount : ''));
                        values.push('开户行:' + (row.receivablesBank ? row.receivablesBank : ''));
                        return values.join("<br/>");
                    }
                }],
                responseHandler: function (res) {
                    return res.data;
                }
            });
            pzDetailObj.tripTable.bootstrapTable({
                formatNoMatches: function () {  //没有匹配的结果
                    return '暂无数据';
                },
                columns: [{
                    title: '开始时间',
                    field: 'startTime',
                    width: 150,
                }, {
                    title: '结束时间',
                    field: 'endTime',
                    width: 150,
                }, {
                    title: '出发地',
                    field: 'startPlace'
                }, {
                    title: '目的地',
                    field: 'endPlace'
                }, {
                    title: '交通工具',
                    field: 'traffic'
                }, {
                    title: '费用支出单位',
                    field: 'expenseUnit'
                }],
                responseHandler: function (res) {
                    return res.data;
                }
            });
            pzDetailObj.moneyTable.bootstrapTable({
                formatNoMatches: function () {  //没有匹配的结果
                    return '暂无数据';
                },
                columns: [{
                    title: '经费类型',
                    field: 'moneyTypeName',
                    width: 150,
                }, {
                    title: '预算项目',
                    field: 'projectName',
                    width: 150,
                }, {
                    title: '经济分类',
                    field: 'cateName'
                }, {
                    title: '申请金额',
                    field: 'money',
                    formatter: function (value, row, index) {
                        return $.moneyFormat(value);
                    }
                }],
                responseHandler: function (res) {
                    return res.data;
                }
            });
            pzDetailObj.payTable.bootstrapTable({
                formatNoMatches: function () {  //没有匹配的结果
                    return '暂无数据';
                },
                columns: [{
                    title: '支付方式',
                    field: 'payTypeName',
                    width: 150,
                }, {
                    title: '支付单号',
                    field: 'docCode',
                    width: 150,
                }, {
                    title: '支付票号',
                    field: 'ticketCode'
                }, {
                    title: '申请金额',
                    field: 'money',
                    formatter: function (value, row, index) {
                        return $.moneyFormat(value);
                    }
                }],
                responseHandler: function (res) {
                    return res.data;
                }
            });
            pzDetailObj.invoiceTable.bootstrapTable({
                formatNoMatches: function () {  //没有匹配的结果
                    return '暂无数据';
                },
                columns: [{
                    title: '发票代码',
                    field: 'code',
                    width: 150,
                }, {
                    title: '发票号码',
                    field: 'number'
                }],
                responseHandler: function (res) {
                    return res.data;
                }
            });
        })
        var pzDetailObj = new Object({
            budgetTable: $('#pzDetail_budgettable'),
            tripTable: $('#pzDetail_triptable'),
            moneyTable: $('#pzDetail_moneytable'),
            payTable: $('#pzDetail_paytable'),
            invoiceTable: $('#pzDetail_invoicetable'),
            myModal: $('#pzDetail_Modal'),
            mainId: undefined,
            applyCode: undefined,
            init(mainId, applyCode, applyType, spendingType) {
                this.mainId = mainId;
                this.applyCode = applyCode;
                // 查询单据信息
                $('#pzDetail_detail').load(`/web/pz/his/pzmain/printTicket?mainId=${mainId}&showPrint=false`);
                // 预算是否展示收款信息
                $('li.trip').addClass('d-none')
                $('li.expense').addClass('d-none')
                if (applyType == 'spending') {
                    this.budgetTable.bootstrapTable('hideColumn', 'receivables');
                    if (spendingType == 2) {
                        $('li.trip').removeClass('d-none')
                    }
                } else {
                    this.budgetTable.bootstrapTable('showColumn', 'receivables');
                    if (applyType == 'expense') {
                        $('li.expense').removeClass('d-none')
                    }
                }
                $('#pzDetail_tab li:first-child a').tab('show')
                this.myModal.modal('show')
            },
            loadAttachHandler() {
                let _self = this;
                $('#pzDetail_lightBoxGallery').empty()
                $.myGet({
                    url: `/pz/cur/pzattach/list/${_self.mainId}`,
                    success: function (data) {
                        if (data && data.code === 0) {
                            data.list.map(o => {
                                if (o.suffix == 'pdf' || o.suffix == 'PDF') {
                                    $('#pzDetail_pdf_item_tmpl').tmpl({attch: o}).appendTo($('#pzDetail_lightBoxGallery'));
                                } else {
                                    $('#pzDetail_img_item_tmpl').tmpl({attch: o}).appendTo($('#pzDetail_lightBoxGallery'));
                                }

                            });
                            $('#pzDetail_lightBoxGallery').viewer('update');
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            },
            loadBudgetHandler() {
                this.budgetTable.bootstrapTable('refresh', {
                    url: `/pz/cur/pzbudget/list/${this.mainId}`
                });
            },
            loadTripHandler() {
                this.tripTable.bootstrapTable('refresh', {
                    url: `/pz/cur/pztraffic/list/${this.mainId}`
                });
            },
            loadMoneyHandler() {
                this.moneyTable.bootstrapTable('refresh', {
                    url: `/pz/cur/pzmoney/list/${this.mainId}`
                });
            },
            loadPayHandler() {invoice/invoicedetail
                this.payTable.bootstrapTable('refresh', {
                    url: `/pz/cur/pzpay/list/${this.mainId}`
                });
            },
            loadInvoiceHandler() {
                this.invoiceTable.bootstrapTable('refresh', {
                    url: `/invoice/invoicedetail/${this.applyCode}`
                });
            }
        })
    </script>
</div>
</body>
</html>